<template>
    <div class="cslist-wrap">
      <scrollList ref="cslist" :loadMore="false" :bounce="false">
        <div slot="defaultScroll">
          <div class="cslist-title">
            <i class="icon-qs"></i>
            <strong>常见问题</strong>
          </div>
          <div class="cslist-content">
            <div class="cs-wrap" v-for="(item, index) in cslist" :key="`cslist-${item.id}`">
              <div class="cs-item" @click.prevent.stop="toggleItem($event, item.serviceIssueList, index, item)">{{item.name}}<i v-if="item.serviceIssueList && item.serviceIssueList.length" :class="iconStatus(item.toggle)"></i></div>
              <div v-if="item.serviceIssueList && item.serviceIssueList.length" :class="`cs-child-wrap ${closeStatus(item.toggle)}`">
                <div class="cs-item cs-child" v-for="child in item.serviceIssueList" :key="`cschild-${child.id}`">
                  <div>
                    <p>{{child.name}}</p>
                    <div class="cs-rs" v-html="child.info"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </scrollList>
      <div class="cslist-footer">
        <div class="cs-button-gp">
          <button type="button" @click="callServer"><i class="icon-mic"></i>在线客服</button>
          <button type="button" @click="callQs"><i class="icon-call"></i>电话热线</button>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import scrollList from '@/components/scroll/list';
  import {getServiceIssue} from '@/mock/mock';
  import Jsbridge from '@/utils/jsbridge';

  export default {
    name: 'cslist',
    data () {
      return {
        cslist: [],
        jsbridge: new Jsbridge()
      }
    },
    computed: {
      iconStatus () {
        return (toggle) => {
          const arrowStatus = 'icon-chevron-down';
          return toggle ? (toggle < 0 ? 'icon-chevron-down' : 'icon-chevron-up') : arrowStatus;
        }
      },
      closeStatus () {
        return (toggle) => {
          const toggleClass = '';
          if (!toggle) {
            return toggleClass;
          } else {
            return toggle > 0 ? 'open' : 'close';
          }
        }
      }
    },
    methods: {
      async initIssueList () {
        try {
          let resData = (await getServiceIssue()).data;
          if (resData.code === '200' || resData.code === '304') {
            resData.data.length && (this.cslist = resData.data);
          }
        } catch (e) {
          console.log(e);
        }
      },
      toggleItem (e, list, index, item) {
        if (!list) {
          return false;
        }
        item.toggle = item.toggle ? item.toggle * -1 : 1;
        this.$set(this.cslist, index, item);
        this.freshTick = setTimeout(() => {
          this.refreshList();
          clearTimeout(this.freshTick);
        }, 200);
      },
      refreshList () {
        this.$refs.cslist && this.$refs.cslist.refresh();
      },
      callQs () {
        window.location.href = 'tel://400-8280-768';
      },
      callServer () {
        this.jsbridge.call('gotoMessage', {type: '5'});
      }
    },
    created () {
      this.initIssueList().then(() => {
        this.$nextTick(() => {
          this.$refs.cslist && this.$refs.cslist._initComponent();
        });
      });
    },
    mounted () {
      this.$nextTick(() => {
        this.refreshList();
      });
    },
    components: {
      scrollList
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
  @import '~@/assets/css/mixin.styl';
  .cslist-wrap
    position relative
    height 100%
    .scrollwrap
      bottom rpx(176)
      .cslist-title
        display flex
        font-size rpx(28)
        padding rpx(20) rpx(24)
        color #fd8a55
        align-items center
        border-1px(#eeeeee, 0, solid)
        .icon-qs
          display block
          width rpx(40)
          height rpx(40)
          background url("~@/assets/img/qs_icon.png") no-repeat
          background-size 100% 100%
          margin-right rpx(16)
      .cslist-content
        padding 0 rpx(20) rpx(20) rpx(20)
        font-size rpx(32)
        line-height rpx(40)
        .cs-item
          padding rpx(48) rpx(14)
          border-1px(#eeeeee, 0, solid)
          display flex
          justify-content space-between
          align-items center
          & i
            display block
            width rpx(26)
            height rpx(15)
          .icon-chevron-down
            background url("~@/assets/img/chevron-down.png") no-repeat
            background-size 100% 100%
          .icon-chevron-up
            background url("~@/assets/img/chevron-up.png") no-repeat
            background-size 100% 100%
        .cs-child-wrap
          height 0
          overflow hidden
          & .cs-child
            padding rpx(48) rpx(50)
            color #999
            & p
              text-align justify
            .cs-rs
              margin-top rpx(10)
              line-height rpx(50)
              font-size rpx(20)
              white-space:pre-wrap
              & p
                line-height rpx(50) !important
                font-size rpx(20) !important
                text-align justify
              & span
                font-size rpx(20) !important
                line-height rpx(50) !important
              & img
                width 100% !important
                height auto !important
                background-color #ccc
                margin-top rpx(10) !important
        & .open
          animation bounceInLeft 0.6s ease-in
          height auto
        & .close
          animation closing 0.2s ease-out
          height 0
    .cslist-footer
      display flex
      justify-content center
      align-items center
      position absolute
      height rpx(176)
      bottom 0
      left 0
      right 0
      box-shadow 0 0 rpx(4) rgba(0, 0, 0, 0.2)
      .cs-button-gp
        display flex
        justify-content center
        width rpx(640)
        & button
          display flex
          width rpx(220)
          height rpx(80)
          margin 0 rpx(35)
          border-radius rpx(80)
          font-size rpx(28)
          color #fff
          align-items center
          & i
            display block
            width rpx(44)
            height rpx(40)
            margin 0 rpx(10) 0 rpx(30)
          & .icon-mic
            background url("~@/assets/img/mic_icon.png") no-repeat
            background-size 100% 100%
          & .icon-call
            background url("~@/assets/img/call_icon.png") no-repeat
            background-size 100% 100%

          &:first-child
            box-shadow 0 rpx(20) rpx(30) rgba(247, 128, 38, 0.2)
            background linear-gradient(to right, #fd9f3b, #f97624)
          &:last-child
            background-image linear-gradient(to right, #0a7dfc, #2dbeff)
            box-shadow 0 rpx(20) rpx(30) rgba(23, 150, 255, 0.2)

  @-webkit-keyframes bounceInLeft {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
      opacity: 0;
      -webkit-transform: translate3d(-3000px, 0, 0);
      transform: translate3d(-3000px, 0, 0);
    }

    60% {
      opacity: 1;
      -webkit-transform: translate3d(25px, 0, 0);
      transform: translate3d(25px, 0, 0);
    }

    75% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    90% {
      -webkit-transform: translate3d(5px, 0, 0);
      transform: translate3d(5px, 0, 0);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes closing
    from {
      height: 50px
    }
    to {
      height: 0
    }
</style>
